<!-- 护理项目列表页 -->
<template>
  <div class="min-h serveProject bg-wt">
    <SearchForm
      :searchData="pagination"
      @handleClear="handleClear"
      @handleSearch="getLists"
      @handleReset="handleReset"
    >
    </SearchForm>
    <!-- 新增对话框子组件 -->
    <!-- ref给当前组件定义引用名，通过引用名就可以得到当前组件对象 -->
    <DialogForm
      ref="formRef"
      :visible="visible"
      :title="title"
      :data="formBaseData"
      @handleClose="handleClose"
      @handleAdd="handleAdd"
      @handleEdit="handleEditForm"
    />
    <!-- 展示列表页面 定义属性和方法-->
    <TableList
      :data="data"
      :total="total"
      :loading="dataLoading"
      :pagination="pagination"
      :hover="hover"
      @onPageChange="onPageChange"
      @handleBulid="handleBulid"
      @handleEdit="handleEdit"
      @handleForbidden="handleForbidden"
      @handleDelete="handleDelete"
    />
    <!--禁用弹层-->
    <Forbidden
      :visible="forbiddenVisible"
      :text="operateText"
      @handleClose="handleCloseForbidden"
      @handleSubmit="handleSubmitForbidden"
    />
    <!-- 删除弹层 -->
    <Delete
      :visible="deleteVisible"
      :deleteText="operateText"
      @handleClose="handleCloseDelete"
      @handleDelete="handleSubmitDelete"
    />
  </div>
</template>

<script setup lang="jsx">
import { onMounted, ref } from 'vue'
import { MessagePlugin } from 'tdesign-vue-next'
import Forbidden from '@/components/Forbidden/index.vue'
// 删除弹层
import Delete from '@/components/OperateDialog/index.vue'
import {
  getProjectList,
  projectAdd,
  getProjectDetails,
  projectUpdate,
  projectStatus,
  projectDelete
} from '@/api/serve'
import TableList from './components/TableList.vue'
import SearchForm from './components/SearchForm.vue'
import DialogForm from './components/DialogForm.vue'

const data = ref([])
const total = ref(0)
// 弹框显示控制
const visible = ref(false)
const title = ref('')
const hover = ref(false)
const dataLoading = ref(false)

// 引用dialogForm组件
const formRef = ref({})

onMounted(() => {
  getLists()
})

const pagination = ref({
  pageNum: 1,
  pageSize: 10
})
// 分页查询
const getLists = async () => {
  pagination.value.pageNum = 1
  getList();
}
const getList = async () => {
  const result = await getProjectList(pagination.value)
  if (result.code === 200) {
    data.value = result.data.records
    total.value = Number(result.data.total)
  }
}
// 分页条件改变
const onPageChange = (val) => {
  pagination.value.pageNum = val.current
  pagination.value.pageSize = val.pageSize
  getList()
}
// 清空单个搜索条件
const handleClear = (val) => {
  if (val === 'name') {
    delete pagination.value.name
  } else {
    delete pagination.value.status
  }
  getList()
}
// 重置所有条件
const handleReset = () => {
  pagination.value = {
    pageNum: 1,
    pageSize: 10
  }
  getList()
}

// 点击新增按钮，弹窗显示
const handleBulid = () => {
  title.value = '新增'
  visible.value = true
}
// 弹窗关闭
const handleClose = () => {
  visible.value = false
}
// 新增项目
const handleAdd = async (val) => {
  const result = await projectAdd(val)
  if (result.code === 200) {
    MessagePlugin.success('新增成功')
    handleClose()
    getList()
    // 重置表单数据
    formRef.value.handleClear()
  } else {
    MessagePlugin.error(result.msg)
  }
}
// 点击编辑按钮，弹窗显示
const handleEdit = (row) => {
  getDetails(row.id)
  title.value = '编辑'
  visible.value = true
}
const formBaseData = ref({})
const getDetails = async (id) => {
  const result = await getProjectDetails(id)
  if (result.code === 200) {
    formBaseData.value = result.data
  } else {
    MessagePlugin.error(result.msg)
  }
}
// 编辑时，点击确定按钮
const handleEditForm = async (val) => {
  const result = await projectUpdate(val)
  if (result.code === 200) {
    MessagePlugin.success('编辑成功')
    handleClose()
    getList()
    // 重置表单数据
    formRef.value.handleClear()
  } else {
    MessagePlugin.error(result.msg)
  }
}

// 获取操作行id
const typeId = ref('')
// 禁用组件数据
const forbiddenVisible = ref(false)
const typeStatus = ref() // 禁用启用目标值
const operateText = ref('护理项目') // 要操作的内容提示
const statusText = ref('') // 禁用启用提示
// 禁用与启用，显示弹窗
const handleForbidden = (row) => {
  typeId.value = row.id
  if (row.status === 1) {
    forbiddenVisible.value = true
    typeStatus.value = 0 // 如果当前为启用状态，则禁用
    statusText.value = '禁用成功'
  } else {
    typeStatus.value = 1 // 如果当前为禁用状态，则启用
    handleSubmitForbidden() // 相当于直接点了禁用弹窗的确定
    statusText.value = '启用成功'
  }
}
// 禁用与启用，点击确定按钮
const handleSubmitForbidden = async () => {
  const params = {
    id: typeId.value,
    status: typeStatus.value
  }
  const result = await projectStatus(params)
  if (result.code === 200) {
    MessagePlugin.success(statusText.value)
    handleCloseForbidden()
    getList()
  } else {
    MessagePlugin.error(result.msg)
  }
}
// 禁用与启用，点击取消按钮
const handleCloseForbidden = () => {
  forbiddenVisible.value = false
}
// 删除弹窗
const deleteVisible = ref(false)
const handleDelete = (row) => {
  typeId.value = row.id
  deleteVisible.value = true
}
// 删除弹窗，点击确定按钮
const handleSubmitDelete = async () => {
  const result = await projectDelete(typeId.value)
  if (result.code === 200) {
    MessagePlugin.success('删除成功')
    handleCloseDelete()
    if((pagination.value.total - 1) % pagination.value.pageSize === 0){
      pagination.value.pageNum -= 1;
    }
    getList()
  } else {
    MessagePlugin.error(result.msg)
  }
}
// 删除弹窗，点击取消按钮
const handleCloseDelete = () => {
  deleteVisible.value = false
}
</script>
